<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>11-3种设置文本内容的方式.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>

    <script>
      //  以后就很少用了 document.write 功能弱 只能把标签写在  /body  标签上面
      // document.write
      document.querySelector('li:nth-child(2)').innerText = '<button>随便修改</button> ';


      document.querySelector('li:nth-child(3)').innerHTML ='<button>随便修改</button> ';


      /* 
      3 种实现在标签中写 动态设置文本

      1  document.write 只能在body标签的中写 以后 很使用它
      2  innerText 只能设置文本，不能解析 html字符串
      3  innerHTML 可以设置文本 也可以解析html字符串 
      
       */

    </script>
  </body>
</html>
